<template>
  <div class="page-bg">
    <an-table
      ref="tableRef"
      v-model="tableData"
      :isCheck="false"
      @getList="getList"
      :pageSizes="[100]"
    >
      <template #action>
        <el-button @click="showFun()" type="primary"
          >新增{{ typeName }}分类</el-button
        >
      </template>
      <el-table-column prop="id" label="ID" width="100" align="center" />
      <el-table-column prop="name" label="名称" />
      <el-table-column label="图片" width="100" align="center" v-if="showImg">
        <template #default="scope">
          <el-image
            style="width: 50px; height: 50px"
            :preview-src-list="[config.serverImg + scope.row.img]"
            :src="config.serverImg + scope.row.img"
            fit="contain"
            preview-teleported
          ></el-image>
        </template>
      </el-table-column>
      <el-table-column
        align="center"
        width="100"
        label="状态"
        :filters="[
          { text: '显示', value: '1' },
          { text: '隐藏', value: '0' },
        ]"
        :filter-method="filterTag"
        filter-placement="bottom-end"
      >
        <template #default="scope">
          <el-tag v-if="scope.row.a_show == '1'" type="success">显示</el-tag>
          <el-tag v-else type="info">隐藏</el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="sort" label="排序" width="100" align="center" />
      <el-table-column
        prop="up_time"
        label="更新时间"
        width="180"
        align="center"
      />
      <el-table-column
        prop="create_time"
        label="创建时间"
        width="180"
        align="center"
      />
      <el-table-column fixed="right" label="操作栏" width="130" align="center">
        <template #default="scope">
          <el-button
            link
            type="primary"
            size="small"
            @click="showFun(scope.row)"
            >编辑</el-button
          >
          <el-popconfirm title="确定删除？" @confirm="delFn(scope.row)">
            <template #reference>
              <el-button link type="primary" size="small">删除</el-button>
            </template>
          </el-popconfirm>
        </template>
      </el-table-column>
    </an-table>

    <!-- 表单弹窗 -->
    <el-dialog
      v-model="layerForm.show"
      :title="layerForm.form.id ? '编辑分类' : '新增分类'"
      width="380px"
    >
      <el-form label-position="top" label-width="100px">
        <el-form-item label="图片：" v-if="showImg">
          <form-img
            v-model="layerForm.form.img"
            @pickImg="pickImg('img', $event)"
          />
        </el-form-item>
        <el-form-item label="名称：">
          <el-input
            v-model.trim="layerForm.form.name"
            placeholder="请输入分类名称"
          ></el-input>
        </el-form-item>
        <el-form-item label="排序：">
          <el-input
            v-model.trim="layerForm.form.sort"
            type="number"
            maxlength="10"
            placeholder="数字越大排名越靠前，0最小"
          ></el-input>
        </el-form-item>

        <el-form-item label="状态：">
          <el-radio v-model="layerForm.form.a_show" label="1"> 显示 </el-radio>
          <el-radio v-model="layerForm.form.a_show" label="0"> 隐藏 </el-radio>
        </el-form-item>
      </el-form>
      <div class="lfex">
        <el-button size="large" @click="layerForm.show = false">取消</el-button>
        <el-button size="large" type="primary" @click="subForm">确定</el-button>
      </div>
    </el-dialog>
    <layer-img v-model="imgOption.show" @getImg="getImg" space="other" />
  </div>
</template>

<script lang="ts" setup>
import anTable from "@/components/an-table.vue";
import config from "@/common/config";
import { ElMessage } from "element-plus";
import {
  tableDataType,
  typeItem,
  typeItemTypeName,
  tableDataQuery,
} from "@/common/interface";
import { post } from "@/common/http";
import dayjs from "dayjs";
import layerImg from "@/components/img/layer-img.vue";
import formImg from "@/components/img/form-img.vue";
import { useImgHook } from "@/composition/useImgApi";
const { imgOption, pickImg } = useImgHook();

interface IProps {
  type: typeItemTypeName;
  typeName?: string;
  showImg?: boolean; //是否显示图片模块
}
const props = withDefaults(defineProps<IProps>(), {
  type: typeItemTypeName.goods,
  showImg: () => false,
});

const tableRef = ref();

//表格组件数据
const tableData = reactive<tableDataType<typeItem>>(new tableDataType());

//获取列表
function getList(data: tableDataQuery): void {
  post("api/Common/type_list_data", {
    page: data.page,
    limit: data.limit,
    type: props.type,
  }).then((res) => {
    tableData.lists = res.data.map((v: typeItem) => {
      return {
        ...v,
        up_time: dayjs(Number(v.up_time) * 1000).format("YYYY-MM-DD HH:mm:ss"),
        create_time: dayjs(Number(v.create_time) * 1000).format(
          "YYYY-MM-DD HH:mm:ss"
        ),
      };
    });
    tableData.total = res.total ?? 0;
    tableData.loading = false;
  });
}

//删除 / 批量删除
function delFn(item: typeItem) {
  post("api/Common/type_del_data", { id: item.id, name: item.name }).then(() =>
    tableRef.value.reload()
  );
}

//筛选当前页数据的 状态
const filterTag = (value: string, row: typeItem) => {
  return row.a_show === value;
};

//编辑
const layerForm = reactive({
  show: false,
  form: new typeItem(props.type),
});
function showFun(data?: typeItem) {
  if (data) {
    layerForm.form = JSON.parse(JSON.stringify(toRaw(data)));
  } else {
    layerForm.form = new typeItem(props.type);
  }
  layerForm.show = true;
}

function subForm() {
  let data = toRaw(layerForm.form);
  if (!data.name) return ElMessage.error("请输入分类名称");
  post("api/common/editType", data).then((res) => {
    tableRef.value.reload();
    ElMessage.success(res.msg);
    layerForm.show = false;
  });
}

//获取弹窗选择的图片
function getImg(data: any) {
  //单图上传
  if (imgOption.option.name === "img") {
    layerForm.form.img = data.imgUrl;
  }
}
</script>

<style lang="scss" scoped>
.el-form{padding:0 10px 10px;}
</style>
